<template>
	<view class="fixedTop">
		<view class="top-nav-box">
			<view class="nav-back" @click="navBack()">
				<view class="image-wrapper"><image src="@/static/img/black-back.png" mode="aspectFit"></image></view>
			</view>
			<template v-if="isOrder=='3'">
				<view class="nav-txt flex1"v-if="title != '邀请好友'">
						<view class="type-item" :style="userInfo.is_weituo == '1'?'margin-right:0':''" :class="title=='1'?'active':''" @click="replace('/pages/client/user/order')" v-if="userInfo.is_lawyer !=1 || userInfo.is_fawu != 1||userInfo.is_touziren!=1">我的订单</view>
						<view class="type-item" :class="title=='2'?'active':''" @click="replace('/pages/lawyer/user/receive-order')" v-if="userInfo.is_lawyer ==1 || userInfo.is_touziren == 1">我的接单</view>
						<view class="type-item" :class="title=='2'?'active':''" @click="replace('/pages/specialist/user/receive-order')" v-if="userInfo.is_fawu==1">我的接单</view>
				</view>
        <view class="nav-txt flex1"v-if="title == '邀请好友'">
          <view class="type-item" style="margin-right:0">邀请好友</view>
                </view>
				<view class="nav-right">
					<template v-if="title == '邀请好友'">
						<view class="nar-right-txt" @click="jump('/pages/client/user/my_invite')">我的邀请</view>
					</template>
					<template v-else>
						<view class="image-wrapper2" @click="$refs.telephoneServiceTel.$refs.popupTel.open()"><image src="@/static/img/icon/index-kf.png" mode="aspectFit"></image></view>
					</template>
				</view>
			</template>
			<view v-else class="nav-txt flex1">{{ title }}</view>
			<slot></slot>
		</view>

		<!-- 客服组件 -->
		<order-telephone name="如有技术问题请联系" phoneNumber="18820268653" ref="telephoneServiceTel"></order-telephone>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	props:{
		title:{
			type: String,
			default: ''
	 	},
		isOrder: {
			type: String,
			default: '1'
		},
	},
  computed: {
    ...mapGetters(['userInfo'])
  },
	data() {
		return {};
	},
	created() {this.gettopColor()},
	methods: {
		navBack() {
			if (this.title == '邀请好友') {
        const nav = navigator.userAgent;
        if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
          phone.onBackPress();
        } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
          this.$bridge.callhandler('onBackPress', {}, res => {});
        }else{
          uni.navigateBack({
            delta: 1
          });
        }
			} else {
				const nav = navigator.userAgent;
				if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
					phone.onBackPress();
				} else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
					this.$bridge.callhandler('onBackPress', {}, res => {});
				}
			}
		},
    //判断顶部颜色
    gettopColor(){
      const nav = navigator.userAgent;
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.setStatusBarColor("#ffffff")
      } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('backgroundColorChange', {topColor:'#ffffff',bottomColor:"#ffffff"}, res => {});
      }
    },
	}
};
</script>

<style lang="scss">
.top-nav-box {
	background: #fff;
	color: #000;
	text-align: center;
	position: relative;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	display: flex;
	width: 100%;
	.nav-txt {
		font-size: 32rpx;
	}
  .flex1{
    display: flex;
    align-items: center;
    justify-content: center;
    .type-item{
      font-size: 16px;
    }
    .type-item:first-child{
      margin-right: 40px;
    }
    .active{
      color:#FFC801;
    }
  }
	.nav-back {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: 0;
		left: 0;
		.image-wrapper {
			margin-left: 14rpx;
			box-sizing: border-box;
			width: 34rpx;
			height: 34rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.nav-right {
		display: flex;
		padding-right: 20rpx;
		position: absolute;
		top: 0;
		right: 0;
		.image-wrapper {
			margin-top: 10rpx;
			margin-right: 20rpx;
			width: 70rpx;
			height: 70rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.image-wrapper2 {
			margin-top: 15rpx;
			width: 50rpx;
			height: 50rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.nar-right-txt {
			font-size: 32rpx;
		}
	}
}
</style>
